<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img {
			height:100px; 
			width:150px;
		}
	</style>
</head>
<body>

<div id="app">
	<ul>
		<li v-for="food in foodList">{{food.name}}:${{food.discount ? food.price * food.discount :  food.price}}</li>

	</ul>

		<hr>
		<h4>以上是vue v-for的用法</h4>
		<br>


		<a v-bind:href="url"><img v-bind:src="imgurl" alt="百度"> </a>

		<hr>
		<h4>以上是vue v-bind的用法</h4>
		<br>

		<button v-on="{mouseenter: onEnter,mouseleave: onLeave}" v-on:click="onClick">点我</button>
		<form v-on:keyup.enter="onKeyup" v-on:submit.prevent="onSubmit">
			<input type="text">
			<button type="submit">提交</button>
		</form>

		<!-- v-on == @ -->
		<button @mouseenter="onEnter" @mouseleave="onLeave" @click="onClick">点我</button>
		<form @keyup.enter="onKeyup" @submit.prevent="onSubmit">
			<input type="text">
			<button type="submit">提交</button>
		</form>

		<hr>
		<h4>以上是vue v-on的用法</h4>
		<br>
	

		<input type="text" v-model="name">
		<br>

		<label>
			男
			<input v-model="sex" value="male" type="radio">
		</label>
		<label>
			女
			<input v-model="sex" value="female" type="radio">
		</label>{{sex}}
		<br>

		<label>
			男
			<input v-model="sexs" value="male" type="checkbox">
		</label>
		<label>
			女
			<input v-model="sexs" value="female" type="checkbox">
		</label>{{sexs}}
		<br>


		<textarea v-model="article"></textarea>

		<div>你来自哪里？</div>
		<select v-model="from">
			<option value="1">北京</option>
			<option value="2">广州</option>
			<option value="3">深圳</option>
			<option value="4">上海</option>
		</select>
		<br>

		<div>你要去哪里？</div>
		<select v-model="dest" multiple>
			<option value="1">北京</option>
			<option value="2">广州</option>
			<option value="3">深圳</option>
			<option value="4">上海</option>
		</select>

		<hr>
		<h4>以上是vue v-model的用法</h4>
		<br>

				
				

</div>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>